<!DOCTYPE html>
<html lang="en">
<hea>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css学习</title>
    <!-- 
        css
          => 概念: 层叠样式表或级联样式表
          => 作用: 美化网页，实现网页外观
          => 语法: 
                   选择器{
                       样式名1：样式值1;  // 一条样式
                       样式名2：样式值2;
                   }
          小结 ： 学习css就是学习css选择器和css样式
          
          css选择器
             => 选中html标签元素的方式方法
             => 选择器分类
                  基础选择器
                     => 标签选择器
                           根据标签名选中操作的html元素 
                     => ID选择器
                           根据ID属性选中操作的html元素
                     => class类选择器
                            根据class类属性值操作html元素

                  高级选择器
                     层次选择器
                        M>N 选中父元素M的子元素N  子代选择器
                        M N  选中父元素M的所有后代元素 
                        M~N  通用兄弟选择器
                        M+N 相邻兄弟选择器

                     伪类选择器
                        N:nth-child(1)
                        a:hover{
                        
                        }
                     属性选择器
                        M[属性名]  选中M标签有属性名的元素
                        M[属性名=属性值]
                     
                    群组选择器
                       M,N{
                         
                       }
                    通用选择器
                       *{
                          
                       }
    
    -->
    <style>
        /* div{
            color: red;
        }
        p{
            font-size: 24px;
        }

        #title{
            color: blue;
            text-decoration: underline;
        }

        .url{
            text-decoration: none;
            color: pink;
        } */

        #d1 p:nth-child(2){
            color: red;
        }
        #d1 p:nth-of-type(1){
            font-size: 24px;
        }

        input[type='text']{
            /* border: none; */
            background-color: aquamarine;
        }


    </style>
</head>
<body>
    <!-- 基础选择器 -->
    <div>内容</div>
    <p>元素二</p>
    <h1 id="title" class="url">标题1</h1>
    <a href="#" class="url">百度</a>
    <h1>标题2</h1>

    <!-- 层次选择器 -->
     <div id="d1">
        <p>内容1</p>
        <p>内容2</p>
        <ul>
            <li>元素一</li>
            <li>元素二</li>
            <li>元素三</li>
            <p>内容3</p>
        </ul>
     </div>

     <input type="text" name="username">
     <input type="password" name="password">
</body>
</html>